<template>


<Layout @onScroll="scrollHandle">
    <template v-slot:middle>
         <div class="project-container">
          <div class="p-container" v-for="(project,i) in projectList" :key="project._id">
            <div class="img-container" v-if="project.thumb">
                <img :src="baseUrl+project.thumb" :alt="project.name">
            </div>
            <div class="content-container">
                <div class="title">
                  <span class="name">{{project.name}}</span>
                  <span class="date">发布于：{{date(project.createdAt)}}</span>
                </div>
                <div class="lank">
                  <span class="link-title">链接</span>
                  <a :href="project.github" target="_blank">GitHub  <span class="iconfont col icon-lianjie1"></span></a>
                  <a :href="project.gitee" target="_blank">Gitee <span class="iconfont col icon-lianjie1"></span></a>
                  <a :href="project.Url" target="_blank">项目展示 <span class="iconfont col icon-lianjie1"></span></a>
                </div>
                <h4 class="discrpit-header">
                    项目简介
                </h4>
                <div class="discrpit">
                  {{project.discription}}
                </div>
            </div>
        </div>
      </div>
    </template>
  </Layout>
 
</template>

<script>
import '../../assets/css/iconfont.css';
import {onMounted} from 'vue';
import {commentList as projectList,get_Comment,loading,setScrollBox} from '../../compostion/useRef'
import {getProject} from '../../api/comment';
import {date} from '../../compostion/useDate';
import Layout from '../../components/Layout/layout.vue';
import {baseUrl} from '../../config'
export default {
  components:{
    Layout
  },
  setup(){


    get_Comment(getProject);
    const scrollHandle = (fn)=>{
      fn(async()=>{
          loading(getProject)
      })
      
    }

    onMounted(()=>{
      setScrollBox('.container-middle .container-middle')
    })
      
      




    return{
        projectList,
        date,
        scrollHandle,
        baseUrl

    }
  }


}
</script>

<style lang="less" scoped>

.project-container{
  height: 100%;
  width: 100%;
  position: relative;
  padding: 0px 0 0 10px;
  box-sizing: border-box;
  .p-container{
    width: 80%;
    height: 200px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    display: flex;
    cursor: pointer;
    margin: 10px 0 0 0;
    background: #fff;
      &:hover{
          box-shadow: 0 0 8px rgb(232, 237,255),
                      0 2px 4px rgb(232, 237,255);

      }
     .lank{
       height: 30px;
       line-height: 30px;
       padding: 0 5px;
       border-bottom: 1px solid #ebebeb;
       min-width: 455px;
       overflow: hidden;
       .link-title{
         background-color: #53534c;
         display: inline-block;
         border-radius: 4px;
         height: 18px;
         line-height: 18px;
         color: #fff;
         padding: 3px 5px;
         font-family: "宋体";
       }
       a{
         padding: 0 5px;
         margin: 0 10px ;
         text-decoration: none;
         &:hover{
           .col{
              color: blue;
           }
            
           }
         
         .col{
           font-weight: 700;
           &:hover{
             color: blue;
           }
         }
       }
     }
    .img-container{
      width: 180px;
      height: 100%;
      text-align: center;
      
      img{
        width: 95%;
        height: 95%;
        transform: translateY(2.5%);
        border-radius: 8px;
       
      }
    }
    .content-container{
       
     flex: 1 0;
     padding: 0 5px 0 10px ;
      .title{
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        border-bottom: 1px solid #ebebeb;
        .name{
          font-weight: 700;
          font-size: 19px;
          padding: 5px ;
        }
        .date{
          padding: 0 10px;
          color:#999;
        }
      }
      .discrpit-header{
        padding: 5px 5px;
        margin: 0;
        font-weight: 600;
        
      }
      .discrpit{
        font-size: 16px;
        text-indent:32px;
       
        color:#6c696d;
        height: 45%; 
        width: 100%;
        padding: 0 5px 0 0;
        overflow-y: auto;
       
      }

    }
  }




}

</style>